<template>
  <div class="timeAppointment_index">
    <c-title :hide="false" text="分时预约"></c-title>
    <div class="headTop">
      <div class="shopStoreConten">
        <div style="width: 65%;">
          <div class="shopName">
            <span style="font-weight: bold;">{{ store_info.name }}</span>
            <span class="loaction">距您{{ store_info.distance }}{{ store_info.distance_unit }}</span>
          </div>
          <div class="shopadress">{{ store_info.full_address }}</div>
        </div>
        <div class="navBtn">
          <div class="service" @click="cserviceShow = !cserviceShow">
            <i class="iconfont icon-zx_map_tel"></i>
            <span>客服</span>
          </div>
          <div class="service" @click="goToAdress">
            <i class="iconfont icon-zx_map_local"></i>
            <span>导航</span>
          </div>
        </div>
      </div>
      <div class="search" @click="goSearch(0)">
        <i class="iconfont icon-a-icon_pressed"></i>
        <span>请输入搜索内容</span>
      </div>
      <div class="loc" @click="goDw">
        <i class="iconfont icon-a-zu4991"></i>
        <span class="locTxt">{{ address }}</span>
        <i class="iconfont icon-advertise-next" style="font-size: 0.875rem;"></i>
      </div>
    </div>


    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in carousels" :key="item.id">
          <img :src="item.thumb" alt="" @click="tapLink(item.link)" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 人气推荐 -->
    <div class="recommend">
      <div class="titleBox">
        <div class="titleBox_left">人气推荐</div>
        <div class="titleBox_right" @click="goSearch(1)">
          <span>更多</span>
          <i class="iconfont icon-icon_more1"></i></div>
      </div>
      <div class="recommendList">
        <div class="lis" v-for="item in recomm" :key="item.id" @click="goUser(item.id)">
          <div class="image">
            <img v-if="item.thumb" :src="item.thumb" />
            <img v-else src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images/error_thumb.png" />
          </div>
          <div class="name">{{ item.name }}</div>
          <div class="intro">{{ item.description }}</div>
        </div>
      </div>
    </div>
    <!-- 精选 -->
    <div class="choiceness">
      <div class="titleBox">
        <div class="titleBox_left">
          <!-- <i class="iconfont icon-fontclass-pingfen" style="color: #f00;"></i> -->
          为你精选
        </div>
      </div>
      <i-Sort :good="sortGood" @tapJson="getChild"></i-Sort>
    </div>
    <cservice-pop :show="cserviceShow" :cservice="cservice_info.cservice || cservice_info" :service_QRcode="cservice_info.service_QRcode" :service_mobile="cservice_info.service_mobile"></cservice-pop>
  </div>
</template>
<script>
import ISort from "./component/sortList";
import cservicePop from "@/components/goods/children/plugin/cservicePopup";
import { scrollMixin } from "../../utils/mixin";
import { Toast } from "vant";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      lng: "",
      lat: "",
      address: "",
      store_info: {},
      recomm: [],
      cservice_info: {},
      carousels: [],
      cserviceShow: false,
      sortGood: [],
      postjson: {},

      page: 1, //分页数，当前页数
      isLoadMore: true, //判断是否要加载更多的标志
      total_page: 0 //总页数
    };
  },
  computed: {
    appointmentLang() {
      if (this.$store.state.shopLanguage?.reserve_simple) {
        return this.$store.state.shopLanguage.reserve_simple;
      } else {
        return { reserve_obj: "预约人员", service: "服务" };
      }
    }
  },
  activated() {
    window.scrollTo(0, 0);
    // 定位
    this.fun
      .getLocation("正在定位")
      .then(res => {
        this.address = res.title;
        this.lat = res.point.lat;
        this.lng = res.point.lng;
        this.getData();
      })
      .catch(err => {});
    this.initData();
    this.getGood();
  },
  methods: {
    goDw() {
      this.$router.push(this.fun.getUrl("o2oLocation_loc", {}, { tag: "timeAppointment_index" }));
    },
    goUser(kid) {
      this.$router.push(this.fun.getUrl("AppointmentUserDe", { id: kid }));
    },
    getChild(e) {
      this.initData();
      this.postjson = e;
      this.postjson.page = this.page;
      this.getGood(this.postjson);
    },
    tapLink(link) {
      if (!link) return;
      window.location.href = link;
    },
    goToAdress() {
      let point = {
        lng: this.store_info.lng,
        lat: this.store_info.lat
      };
      this.fun.goToWXAdress(point, this.store_info.name, this.store_info.full_address);
    },
    goSearch(key) {
      this.$router.push(this.fun.getUrl("timeAppointment_search", { ind: key }));
    },
    getGood(json) {
      if (!json) {
        json = {};
        json.page = this.page;
      }
      $http
        .get("plugin.reserve-simple.frontend.goods.search-goods", json, "加载中")
        .then(response => {
          if (response.result === 1) {
            this.sortGood = response.data.data;
            this.isLoadMore = true;
            this.total_page = response.data.last_page;
            if (!this.total_page) {
              this.total_page = 0;
            }
          } else {
            Toast(response.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    getData() {
      let p = this.fun.bd_encrypt(this.lng, this.lat);
      let json = {
        lng: p.lng,
        lat: p.lat
      };
      $http
        .get("plugin.reserve-simple.frontend.index.get-data", json, "加载中")
        .then(response => {
          if (response.result === 1) {
            console.log(response.data);
            this.store_info = response.data.store_info;
            this.cservice_info = response.data.cservice;
            this.carousels = response.data.carousels;
            this.recomm = response.data.recommand_obj_list;
          } else {
            Toast(response.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //加载更多数据
    getMoreData() {
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page += 1;
        this.postjson.page = this.page;
        $http.get("plugin.reserve-simple.frontend.goods.search-goods", this.postjson).then(res => {
          this.isLoadMore = true;
          if (res.result === 1) {
            var nextPageData = res.data.data;
            this.listData = this.listData.concat(nextPageData);
          } else {
            this.page = this.page - 1;
            this.isLoadMore = false;
          }
        });
      }
    },
    initData() {
      this.page = 1;
      this.isLoadMore = true;
      this.total_page = 0;
    }
  },
  components: {
    ISort,
    cservicePop
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.lineNone {
  width: 23.44rem;
  height: 0.63rem;
  background-color: #f6f6f6;
}

.timeAppointment_index {
  .choiceness {
    padding:  0   0.91rem 1.25rem;
    // background: #fff;

    .titleBox {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .titleBox_right {
        display: flex;
        align-items: center;

        margin-right: 0.94rem;
        font-size: 0.75rem;
        color: #666;

        .iconfont {
          font-size: 1.2rem;
          color: #000;
        }
      }

      .titleBox_left {
        flex: 1;
        position: relative;
        font-size: 1rem;
        color: #353434;
        font-weight: 400;
        text-align: left;
        margin-bottom: 1rem;

        // .iconfont {
        //   font-size: 1.4rem;
        // }
      }
    }
  }

  .recommend {
    padding-top:1rem;
    padding-left: 0.91rem;
    padding-bottom: 1rem;

    .recommendList::-webkit-scrollbar{
      display: none;
    }
    .recommendList {
      overflow-x: scroll;
      width: 100%;
      padding-top:1rem;
      display: flex;
      .lis::after{
        content:"";
        position: absolute;
        top: 1.75rem;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(174deg, var(--themeBaseColor) -66%, #FFFFFF 65%);
        // background: linear-gradient(0deg, #FFFFFF , #FFF 40%,  var(--themeBaseColor));
        border-radius: 0.25rem;
        z-index: -1;
      }
      .lis {
        position: relative;
        margin-right: 0.63rem;
        flex-shrink: 0;
        width: 6.25rem;
        height: 7.125rem;
        border-radius: 0.31rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 0.63rem ;
        box-sizing: border-box;

        .image {
          width: 3.375rem;
          height: 3.375rem;
          background-color: #dcdcdc;
          border-radius: 100%;
          margin-bottom: 0.63rem;
          border: 2px solid #fff;

          img {
            width: 100%;
            height: 100%;
            border-radius: 100%;
          }
        }

        .name {
          font-size: 0.81rem;
          color: #4f4f4f;
          margin-bottom: 0.3rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
        }

        .intro {
          color: #666;
          font-size: 0.69rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          text-align: left;
        }
      }
    }

    .titleBox {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .titleBox_right {
        margin-right: 0.94rem;
        font-size: 0.75rem;
        color: #666;
        display: flex;
        align-items: center;

        .iconfont {
          font-size: 0.55rem;
          color: #666;
        }
      }

      .titleBox_left {
        flex: 1;
        font-size: 1rem;
        color: #353434;
        font-weight: 400;
        text-align: left;

        .iconfont {
          font-size: 1.4rem;
        }
      }
    }
  }

  .banner {
    height: 9.38rem;
    margin:1rem 0.75rem 0;
    border-radius: 0.5rem;
    overflow: hidden;

    .my-swipe {
      width: 100%;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .shopStoreConten {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .distance {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;

      .rightIcon {
        display: flex;
        align-items: center;

        .line {
          width: 1px;
          height: 1rem;
          background-color: #c3c3c3;
          margin: 0 1.16rem;
        }

        .icon-fontclass-yunkefu {
          color: #fc8200;
        }

        .icon-fontclass-tuiguang2 {
          color: #f42a26;
        }
      }
    }

    .shopName {
      display: flex;
      text-align: left;
      font-size: 1rem;
      color: #3B3B4A;
      // font-weight: 500;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-bottom: .625rem;
    }
    .loaction{
      position: relative;
      margin-left: 0.25rem;
      padding: .2813rem 0.5rem;
      font-size: .6875rem;
      border-radius: 0.75rem;
      overflow: hidden;
      color: var(--themeBaseColor);
    }
    .loaction::after{
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      content:"";
      background: var(--themeBaseColor);
      opacity: .1;
    }

    .shopadress {
      text-align: left;
      font-size: .75rem;
      color: #6E6E79;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .headTop {
    padding: 1.31rem 0.94rem 0.75rem 0.94rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    overflow: hidden;
    background: #fff;
    color: #000;



  .navBtn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .line {
      background-color: #c3c3c3;
      width: 0.03rem;
      height: 1.06rem;
    }

    .service:first-child{
        margin-right: 1rem;
      }
    .service {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #AAAAB3;
      font-size: .625rem;

      .iconfont {
        color: var(--themeBaseColor);
        font-size: 1rem;
        margin-bottom: .25rem;
      }

      .icon-fontclass-yunkefu {
        color: #fc8200;
      }

      .icon-fontclass-tuiguang2 {
        color: #f42a26;
      }
    }
  }




    .search {
      width: 100%;
      height: 1.88rem;
      background-color: #fff;
      border-radius: 0.94rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: .375rem  0  .375rem 1rem;
      color: #999;
      margin-top: 1.5rem;
      border:1px solid var(--themeBaseColor);
      margin-bottom: .75rem;

      .iconfont {
        margin-right: 0.38rem;
      }
    }

    .loc {
      display: flex;
      align-items: center;

      .icon-advertise-next {
        font-size: 1.2rem;
      }

      .icon-a-zu4991 {
        margin-right: 0.44rem;
        font-size: 0.875rem;
      }

      .locTxt {
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.75rem;
      }
    }
  }
}
</style>